<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./settings.css">
</head>
<body>
    <div class="container-fluid" id="app">
        <div class="row pt-2">
            <div class="col-3">
                <ul class="list-group nav">
                    <li class="list-group-item cursor-pointer"><a class="active" data-bs-toggle="tab" href="#tabCommon">常用</a></li>
                    <li class="list-group-item cursor-pointer"><a data-bs-toggle="tab" href="#tabHotkeys">快捷键说明</a></li>
                    <li class="list-group-item cursor-pointer"><a data-bs-toggle="tab" href="#tabAbout">关于</a></li>
                </ul>
            </div>
            <div class="col-9">
                <div class="tab-content">
                    <div class="tab-pane container-fluid active" id="tabCommon">
                        <div class="row">
                            <div class="col">
                                <label for="chkSaveSession">
                                    <input type="checkbox" id="chkSaveSession" v-model="s.saveSession" @click="changeSaveSession">&nbsp;&nbsp;保存会话
                                </label>
                            </div>
                        </div>
                        <div class="row pt-2">
                            <div class="col">
                                <label for="chkCloseAppConfirm">
                                    <input type="checkbox" id="chkCloseAppConfirm" v-model="s.closeAppConfirm" @click="changeCloseAppConfirm">&nbsp;&nbsp;关闭应用时提示确认
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane container-fluid" id="tabHotkeys">
                        <div class="row">
                            <div class="col">
                                <p><h3>快捷键说明</h3></p>
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>键</th>
                                            <th>说明</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><kbd>cmd/ctrl + r</kbd></td>
                                            <td>重新加载应用</td>
                                        </tr>
                                        <tr>
                                            <td><kbd>cmd/ctrl + t</kbd></td>
                                            <td>新建标签页</td>
                                        </tr>
                                        <tr>
                                            <td><kbd>cmd/ctrl + w</kbd></td>
                                            <td>关闭当前标签页</td>
                                        </tr>
                                        <tr>
                                            <td><kbd>cmd/ctrl + f</kbd></td>
                                            <td>搜索</td>
                                        </tr>
                                        <tr>
                                            <td><kbd>F2</kbd></td>
                                            <td>修改当前标签页的title</td>
                                        </tr>
                                        <tr>
                                            <td><kbd>cmd/ctrl + s</kbd></td>
                                            <td>保存当前json</td>
                                        </tr>
                                        <tr>
                                            <td><kbd>alt + s</kbd></td>
                                            <td>打开设置面板</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane container-fluid" id="tabAbout">
                        <div class="row">
                            <div class="col">
                                <p>{{appInfo}}</p>
                                <p>项目主页：<a href="#" @click="openUrl($event, 'homePage')">{{homePage}}</a></p>
                                <p>代码仓库：<a href="#" @click="openUrl($event), 'repository'">{{repository}}</a></p>
                                <p>给小可爱买杯咖啡：</p>
                                <p><img src="./assets/pay.png" alt=""></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../node_modules/vue/dist/vue.global.prod.js" charset="utf-8"></script>
    <script src="./settings.js"></script>
</body>
</html>